<template>
  <div
    class="desktop-frame"
    @click="activeIndex=-1"
    @contextmenu.prevent="$emit('deskTopRightClick',$event)"
  >
    <div
      v-for="(item, index) in data"
      :key="index"
      :class="['desktop-item',{'desktop-item-active':activeIndex===index}]"
      :title="item.name"
      @click.stop="activeIndex = index"
      @contextmenu.prevent="$emit('deskItemRightClick',item,index,$event)"
      @dblclick="$emit('deskItemDblclick',item,index,$event)"
    >
      <icon-show class="desktop-item-icon" :src="item" />
      <span :class="['desktop-item-text',{'desktop-item-text-active':activeIndex===index}]">
        {{ item.name }}
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Desktop',
  components: {
    IconShow: () => import('@components/IconShow.vue')
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: -1
    }
  }
}
</script>
<style scoped>
.desktop-frame {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  text-align: center;
  user-select: none;
}
.desktop-item{
  width: 6rem;
  flex-basis: 7rem;
  padding: .5rem;
  border-radius: .5rem;
}
.desktop-item-icon {
  font-size: 3rem;
  color:gold;
}
.desktop-item-text{
  display: inline-block;
  width: 100%;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-item-text-active {
  white-space:normal;
}
.desktop-item-active,
.desktop-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
</style>
